<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
			#box{
				width: 100px;
				height: 100px;
				border:1px solid #333;
				padding: 100px;
			}
			#div{
				width: 100px;
				height: 100px;
				background: red;
				transition: 1s;
				transform-origin: left center; 
				-webkit-transform-origin: left center; 
			}
			
		</style>
		<script>
			document.addEventListener('touchstart',function(ev){
				ev.preventDefault();
			})
			window.onload = function(){
				var div = document.querySelector('#div');
				div.addEventListener('touchend',function(){
					//div.style.WebkitTransform = div.style.transform = 'rotate(90deg)';
					//div.style.WebkitTransform = div.style.transform = 'skew(40deg,40deg)';
					//div.style.WebkitTransform = div.style.transform = 'scale(2)';
					//div.style.WebkitTransform = div.style.transform = 'translate(100px,100px)';
					div.style.WebkitTransform = div.style.transform = 'rotate(360deg)';
				});
				/*
						rotate	旋转	 deg
						
						skew	斜切	 deg
							skewX
							skewY
							
						scale	缩放(原始大小的多少倍)(X,Y)
							scaleX
							scaleY
							
						translate	位移 px
							translateX
							translateY
							
						transform-origin:center center; 基点
						关键字：left right top bottom
						百分比
						距离单位(px em rem...)
						
						transform 的执行顺序，先写后执行
				*/
			}
		</script>
	</head>
	
	<body>
		<!--
			transform 变换
			移动端使用应加前缀 -webkit-transform
		-->
		<div id="box">
			<div id="div"></div>
		</div>
	</body>
</html>
